/*
#87B38D
#022107
#76CC81
#92DD9C
#B8F2BF
*/
#{lineheight:18px; font-size: 16px;color:#022107;}

body{
	min-height: 101vh;
	padding-top: 9vh;
	/*padding-bottom: 5vh;*/
}

header{
	position: fixed;	
	top:0;
	width:100%;
	height: 8vh;
	text-align: center;
	vertical-align: middle;
	padding-top: 10px;
	color: #B8F2BF;
	background-color: #022107;
	font-size: larger;
}

header.floatright{
	color:#000000;
	height: 6vh;
}

header img{
	height: 200%;
	margin-top:  -10px;
}

footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 5vh;
	text-align: center;
	vertical-align: middle;
	color: #B8F2BF;
	background-color: #022107;
}

footer img{
	height: 200%;
	margin-top:  -60px;
}

#menu ul{
	list-style-type:none;
}

#menu  li{
	display: inline-block;	
	font-size:  22px;
	margin: 20px 25px 0px 0;
	color: white;
	text-decoration: none;
}

#menu a {
	height:22px;
	padding:0px 5px;
	color:blue;
	border-radius:7px;	
}

table{
	border-collapse: collapse;
	margin: 0 15px 10px 0;
	background-color: #B8F2BF;
	color:#022107;
	max-height: inherit;
}

#tableTrip{
	float: left;
	max-width: 405px;
	display: inline-block;
	overflow-y: scroll;
	max-height: 350px;
	transition: height 600ms;
}

#tableTrip:hover{
	max-height: 800px;
}

#tableTrip table{
	max-height: inherit;
}
tr:nth-child(odd){
	background-color:#76CC81;	
}
tr:nth-child(even){
	background-color:#92DD9C;
}

th{
	border-bottom: 2px solid black;
}

td img{
	transform: rotate(-5deg);	
}

button a{
	text-decoration: none;
	color: white;
}

select{
	width: 207px;
	lineheight:20px;
	margin-bottom: 3px;
}

button,input[type=submit]{
	width: 100%;
	height: 28px;
	background-color: #022107;
	border-radius: 8px;
	color: white;
	font-weight: bold;
	text-align: center;
	transform: rotate(-1deg);
	box-shadow: 5px 5px 5px #599960;
}

label#uploadImage{
	display: none;
}

input#uploadImage{
 	width: 100%;
	height: 28px;
	background-color: #76CC81;
	border-radius: 8px;
	color: blue;
	font-weight: bold;
	text-align: center;
	
}

input{
	width: 200px;
	margin: 0 0 3px 2px;
}

input[type=radio]{
	margin: 0 1px 0 6px;
	width: 20px;
	vertical-align: middle;
}

input[type=checkbox]{
	height: 20px;
	width: 20px;
	margin:5px 10px;
	position: relative;
	top: 3px;
}

.radioButton{
	margin: 15px 0;
	font-size: 14px;
}

fieldset{
	margin: 0 15px 15px 0;
	width: 240px;
	text-align: center;
	background-color: #76CC81;
	border-radius: 7px;
}

legend{
	background-color:#92DD9C;
	border-radius: 5px 5px 5px 5px;
	padding: 2px 10px;
	border: 1px solid #022107;
	transform: rotate(3deg);
	box-shadow: 5px 5px 5px #599960;
}

textarea{
	width: 100%;
	height: 60px;
}

h3{
	margin: 5px 10px;
	color: Blue;
}

img{
	vertical-align: middle;
	
}

#workspace,#tabel{
	margin: 0 10px 10px 2px;
	float: left;
}

#wachtwoord{
	text-align: center;
	color: red;
	font-weight: bolder;
}

#extractForm{
	height: 30px;
	overflow-y:auto;
	transition: height 1s;
	transition-delay: 1s;
}

#extractForm1:hover{
	height: auto;
}

.half{width: 48%}
.third{width: 27%;}
.w30{width: 30px;}
.w60{width: 60px;}
.w70{width: 68px;}
.w80{width: 80px;}
.w112{width: 112px;}
.w124{width: 124px;}
.w275{width: 275px;}
.w320{width: 320px;}
.w360{width: 360px;}

.textright{text-align: right;}
.textleft{text-align: left;}
.textcenter{margin: 0 auto;text-align: center;}
.floatright{float: right;}
.floatleft{float: left;}
.orange{color: #ff5500}
.saveButton{width: 80px;height: 25px;}

@media screen and (max-width: 600px) {
*{font-size:22px; border-box;}
body{background-color: #00ff7f;}

fieldset{
	width: 370px;
}

select,input		{width: 100%;	height: 35px;}
input[type=time]	{width: 37%;	height: 35px;}
input[type=date]	{width: 57%;	height: 35px;}
input[type=submit]	{height: 45px;}
input[type=checkbox]{width: 30px;	height: 30px;}
input.third			{width: 29%;	height: 35px;}
input.location		{width: 100%;	height: 35px;}

.w30				{width:11%;}
.w70				{width:26%;}	
.w124 				{width:66%; margin-left: 1%;}
textarea			{height: 120px}

.radioButton		{font-size: 22px;}
/*header				{margin-bottom: 40px;}
footer				{position: fixed;bottom: 0}*/
#menu  li{
	display: inline-block;	
	margin: 15px 0px 0px 0;
	color: white;
	text-decoration: none;
}
#menu li a img {width: 35px; height:35px}
}



/*
@media screen and (min-width: 601px) {
  body {
    background-color: lightblue;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}*/